fix(radio): radio button flex-shrink problem #636
Conversation
|
Thanks for the PR and very good explanation! 😊 We had similar issue with checkbox component and fixed it by setting min/max width/height for it. Can we have some side effects of disabling flex layout for radio in terms of vertical alignment or gap between label and it etc? |
Same effect can be achieved via #label::before {
content: '';
display: inline-block;
box-sizing: border-box;
min-width: var(--size);
min-height: var(--size);
max-width: var(--size);
max-height: var(--size);
...
} |
|
I'm not completely sure as well but even if there is no difference, to be aligned with other components, that would be better, I believe. Thanks! |
doganozturk
force-pushed
the
fix/radio-button-shrinking
branch
2 times, most recently
from
9ec0a82
to
eaa0535
Compare
doganozturk
force-pushed
the
fix/radio-button-shrinking
branch
from
eaa0535
to
9a19813
Compare
|
🎉 This PR is included in version 2.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
I've noticed an issue with the
bl-radiocomponent where the radio button's size shrinks if the text within the#labelelement becomes too long. The#labelelement is a flex container, its:beforepseudo-selector, which is used to create the radio button, is designed with strict width and height settings, leading to this behavior.The cause of the radio button shrinking is tied to its
flex-shrinkproperty. However, applyingflex-shrink: 0;to address this issue would be overly specific.As a solution, I've implemented a
flex: none;setting which prevents the radio button from shrinking.I'm attaching a few example screenshots to illustrate the issue: